w<template>
  <div class="content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="微信订单号">
        <el-input v-model="formInline.transaction_id" placeholder="请输入微信订单号" clearable />
      </el-form-item>
      <el-form-item label="商户订单号">
        <el-input v-model="formInline.out_trade_no" placeholder="请输入商户订单号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="proxy.$refs.FileUploaderCom.open()" plain :loading="loading">上传Excel模板</el-button>
        <el-button type="primary" @click="toDownload" plain>下载Excel模板</el-button>
        <el-button type="primary" @click="proxy.$refs.inputFile.click()" plain :loading="loading">导入Excel</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableParams.rows" stripe>
      <el-table-column type="index" />
      <el-table-column prop="pay_time" label="交易时间" min-width="180" />
      <el-table-column prop="transaction_id" label="微信订单号" min-width="250" />
      <el-table-column prop="out_trade_no" label="商户订单号" min-width="250" />
      <el-table-column prop="transaction_type" label="交易类型" min-width="120" />
      <el-table-column prop="transaction_status" label="交易状态" min-width="120" />
      <el-table-column prop="bank" label="付款银行" min-width="120" />
      <el-table-column prop="currency_type" label="货币种类" min-width="120" />
      <el-table-column prop="amount" label="应结订单金额" min-width="120" />
      <el-table-column prop="wx_refund_trade_no" label="微信退款单号" min-width="120" />
      <el-table-column prop="refund_trade_no" label="商户退款单号" min-width="120" />
      <el-table-column prop="refund_amount" label="退款金额" min-width="120" />
      <el-table-column prop="refund_type" label="退款类型" min-width="120" />
      <el-table-column prop="refund_status" label="退款状态" min-width="120" />
    </el-table>

    <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageIndex" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <!-- 导入文件 -->
    <input type="file" @change="handleFileUpload" v-show="false" ref="inputFile">

    <!-- 上传文件 -->
    <FileUploader v-model="fileUrl" ref="FileUploaderCom"></FileUploader>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();

let formInline = ref({
  pageIndex: 1,
  pageSize: 10,
  transaction_id: "",
  out_trade_no: "",
});
let loading = ref(false);
let tableParams = ref({});
let fileUrl = ref("");
let info = ref("");

onMounted(() => {
  search();
  systemSettingsConfig({}, "details");
});

let search = () => {
  formInline.value.pageIndex = 1;
  getInfo();
};

let init = () => {
  formInline.value = {
    pageIndex: 1,
    pageSize: 10,
    transaction_id: "",
    out_trade_no: "",
  };
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.wxPay({
    type: "list",
    data: formInline.value,
  });
};

async function handleFileUpload(event) {
  try {
    loading.value = true;
    const file = event.target.files[0]; // 获取选择的文件
    let arr = <any>[];
    let resp = await proxy.$utils.fileToJson(file);
    for (let index = 0; index < resp.length; index++) {
      const element = resp[index];
      if (isValidDateTimeFormat(element[0])) {
        arr.push({
          pay_time: isValidDateTimeFormat(element[0]),
          transaction_id: element[5],
          out_trade_no: extractFormat(element[6]),
          transaction_type: element[8],
          transaction_status: element[9],
          bank: element[10],
          currency_type: element[11],
          amount: element[12],
          wx_refund_trade_no: element[14],
          refund_trade_no: element[15],
          refund_amount: element[16],
          refund_type: element[18],
          refund_status: element[19],
        });
      }
    }
    await proxy.$apis.wxPay({
      type: "upload",
      data: arr,
    });
    proxy.$utils.showToast("导入成功");
    search();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

//截取字符串里面 商户订单号
function extractFormat(str) {
  const regex = /[0-9_]+/g;
  const matches = str.match(regex);
  return matches ? matches.join("") : null;
}

//获取字符串里面的时间格式
function isValidDateTimeFormat(str) {
  const regex = /(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/; // 匹配 2024-02-26 23:35:56 格式的时间
  const match = str.match(regex); // 在字符串中查找匹配的时间格式部分
  if (match) {
    return match[0]; // 返回匹配到的时间格式部分
  } else {
    return null;
  }
}

let systemSettingsConfig = async (data, type) => {
  if (type == "details") {
    info.value = await proxy.$apis.systemConfig({
      type,
      data: data,
    });
  } else if (type == "update") {
    data.oldDownUrl = info.value.wxPayDownTemplateUrl;
    await proxy.$apis.systemConfig({
      type,
      data: data,
    });
    await systemSettingsConfig({}, "details");
    proxy.$utils.showToast("模板更新成功");
    fileUrl.value = "";
  }
};

let toDownload = () => {
  window.location.href = info.value.wxPayDownTemplateUrl;
};

watch(
  () => fileUrl.value,
  (newValue, oldValue) => {
    if (newValue)
      systemSettingsConfig({ wxPayDownTemplateUrl: newValue }, "update");
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
